<template>
  <div class="question">
    <el-card>
      <div class="operation">
        <el-button type="primary" @click="$router.push({path: '/position/operation'})">添加试题</el-button>
        <el-input prefix-icon="el-icon-search" placeholder="搜索" />
        <!-- 占位 不可删除 flex -->
        <div></div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="题干" show-overflow-tooltip min-width="200px">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type_id === 1">选择题</el-tag>
            <el-tag v-if="scope.row.type_id === 2" type="success">填空题</el-tag>
            <el-tag v-if="scope.row.type_id === 3" type="info">判断题</el-tag>
            <el-tag v-if="scope.row.type_id === 4" type="warning">简答题</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="难易度" width="80px">
          <template slot-scope="scope">
            {{ scope.row.difficulty }}
          </template>
        </el-table-column>
        <el-table-column label="修改日期" width="200px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              scope.row.updated || "暂无数据"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用量">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.usage || "暂无数据"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width='150px'>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { request } from "../../api/request";
export default {
  data() {
    return {
      tableData: [],
      // 分页数据
      page: {
        pageSize: 10, // 页容量
        pageNum: 1, // 页码
        total: 100, // 总数居条数
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getList();
    },
    getList() {
      request({
        query: this.page,
        method: "GET",
        url: "question",
        route: "list",
      }).then((res) => {
        this.tableData = res.data.rows;
        this.page.total = res.data.count;
      });
    },
    // 点击编辑
    handleEdit(index, row) {
      index
      this.$router.push(`/position/operation?typeid=${row.type_id}&id=${row.id}`)
    },
    // 点击删除
    handleDelete(index, row) {
      this.$confirm('此操作将永远删除改试题，是否继续？','提示',{
        confirmButtonText:'确定',
        canceButtonText:'取消',
        type:'warning'
      }).then(() => {
        request({
          method: "DELETE",
          url: "question",
          route: "remove",
          query: row.id,
        }).then((res) => {
          if(res.code !== '200') return this.$message.info(res.msg)
          this.$message.success(res.msg)
          this.getList()
        });
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
  },
};
</script>
<style lang="less" scoped>
.question {
  .operation {
    display: flex;
    padding: 10px;
    .el-button {
      flex: 1;
      margin: 0 20px;
    }
    .el-input {
      flex: 5;
    }
    div {
      flex: 15;
    }
  }
  .el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: end;
  }
}
.el-main{
  div{
    // opacity: 1;
    transition: 0.3s;
  }
}
</style>